<template>
	<view class="page">
		<u-navbar title="角色新增" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view class="body">
			<scroll-view scroll-y="true" style="height: 100%;">
				<template v-if="loading">
					<view class="item Skeleton" v-for="item in 30" :key="item"></view>
				</template>
				<u--form v-else labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item labelPosition='top' labelWidth='100rpx' label="角色名:" prop="display_name" borderBottom>
						<u--input v-model="form.display_name" placeholder="请输入角色名" />
					</u-form-item>
					<u-form-item labelPosition='top' labelWidth='100rpx' label="Slug:" prop="slug" borderBottom>
						<u--input v-model="form.slug" placeholder="请输入slug" />
					</u-form-item>
					<u-form-item labelPosition='top' labelWidth='100rpx' label="描述:" prop="description" borderBottom>
						<u--textarea v-model="form.description" placeholder="请输入描述"></u--textarea>
					</u-form-item>
					<u-form-item labelPosition='top' labelWidth='100rpx' label="权限:" prop="permission_ids" borderBottom>
						<u-checkbox-group v-model="selectedPermissions">
							<view class="powerBox">
								<view class="title">
									<view>
										<u-button @click='SelecteAll' color="#3975c6">选中所有</u-button>
									</view>
									<view>
										<u-button @click='selectedPermissions=[]' type='error'>取消选中</u-button>
									</view>
								</view>
								<view  v-for="(item, index) in permissionsTransform" :key="index">
									<view class="selectTitle">
										<text>
											{{item.display_name }}
										</text>
										<text @click="selectItme(item.children)">[全选/</text>
										<text @click="delItme(item.children)">取消]</text>
									</view>
									<u-checkbox :customStyle="{marginBottom: '8px',marginLeft:'8px'}"
										v-for="childrenItem in item.children" :key='childrenItem.id'
										:label="childrenItem.display_name" :name="childrenItem.id">
									</u-checkbox>
								</view>
							</view>

						</u-checkbox-group>
					</u-form-item>
				</u--form>
			</scroll-view>
		</view>
		<view v-if="!loading">
			<u-button @click='submit' :disabled="disabled">新增</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				form: {
					display_name: '',
					slug: '',
					description: '',
					permission_ids: [],
				},
				rules: {
					'display_name': {
						type: 'string',
						required: true,
						message: '请填写角色名',
						trigger: ['blur', 'change']
					},
					'slug': {
						type: 'string',
						required: true,
						message: '请填写slug',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						required: true,
						message: '请填写描述',
						trigger: ['blur', 'change']
					},
					permission_ids: {
						type: 'array',
						required: true,
						message: '请选择权限',
						trigger: ['change']
					},
				},
				permissions: [],
				selectedPermissions: [],
				disabled:false
			}
		},
		computed: {
			permissionsTransform() {
				let p = [];
				if (this.permissions) {
					for (let i in this.permissions) {
						let children = [];

						for (let j = 0; j < this.permissions[i].length; j++) {
							children.push({
								id: this.permissions[i][j].id,
								display_name: this.permissions[i][j].display_name,
							});
						}

						p.push({
							id: i,
							display_name: i,
							children: children,
						});
					}
				}
				console.log(p)
				return p;
			},
		},
		watch: {
			selectedPermissions() {
				this.form.permission_ids = this.selectedPermissions
			}
		},
		onLoad() {
			this.$api_company.Administrator_role.Info().then(res => {
				this.permissions = res.data.permissions
				this.loading=false
				setTimeout(()=>{
					this.$refs.uForm.setRules(this.rules)
				},500)
			})
		},
		methods: {
			SelecteAll() {
				let arr = []
				this.permissionsTransform.forEach(item => {

					arr.push(...item.children)
				})
				this.selectedPermissions = arr.map(item => item.id)
			},
			selectItme(item) {
				this.selectedPermissions.push(...item.map(items => items.id))
				this.selectedPermissions = this.selectedPermissions.filter((item, index) => this.selectedPermissions
					.indexOf(item) === index)
			},
			delItme(item) {
				let id = item.map(items => items.id)
				this.selectedPermissions = this.selectedPermissions.filter(items => !id.includes(items))
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title:'新增中...'
					})
					this.disabled=true
					this.$api_company.Administrator_role.Add(this.form).then(res=>{
						uni.reLaunch({
							url:'/administrator_role/list'
						})
						uni.hideLoading()
						this.disabled=false
					}).catch(err=>{
						uni.hideLoading()
						uni.$u.toast(err.message)
						this.disabled=false
					})
				}).catch(errors => {
					uni.$u.toast('请输入完整信息')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
		margin-top: 20rpx;
		overflow: hidden;
	}

	::v-deep .u-form-item__body__left {
		margin-bottom: 20rpx !important;
	}

	

	.powerBox {
		border: 1px solid #eee;
		font-size: 24rpx;
		width: 100%;
		.title {
			background: #eee;
			padding: 10rpx;
			display: flex;
			>view {
				width: 170rpx;
				margin-right: 20rpx;
			}
		}

		.selectTitle {
			letter-spacing: 1px;
			font-size: 30rpx;
			background: #f8f9fa;
			padding: 10rpx;
			margin-bottom: 8px;
			>span {
				color: #bbb;
				cursor: pointer;
			}
		}
	}

	::v-deep .u-form-item__body__right__message {
		margin-left: 0 !important;
	}
	.item{
		margin-bottom: 20rpx;
		height: 30rpx;
		width: 100%;
	}
</style>